<template>
    <div class="app-container">
        <el-card shadow="never" v-loading="loading">
            <el-row :gutter="5">
                <el-col :span="24" class="main-card-view">
                    <el-row>
                        <el-card shadow="never" class="top-search-view-card">
                            <el-row>
                                <el-form :inline="true" :model="searchForm" class="demo-form-inline search-view">
                                    <el-form-item label="专家名称">
                                        <el-input v-model="searchForm.expertName" placeholder="请输入"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户名称">
                                        <el-input v-model="searchForm.author" placeholder="请输入"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="handleSearch" class="search-button">查询
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-card>
                    </el-row>

                    <el-row>
                        <el-card shadow="never">
                            <el-table :data="tableData" :stripe="true" style="width: 100%">
                                <el-table-column prop="author" align="center" label="用户昵称" />
                                <el-table-column prop="problemDetails" align="center" label="提出问题" />
                                <el-table-column prop="expertName" align="center" label="专家" />
                                <el-table-column prop="problemOverview" align="center" label="解答" />
                                <el-table-column prop="status" align="center" label="状态" />
                                <el-table-column align="center" label="操作" width="200">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="showDetails(scope.row)">详情</el-button>
                                        <el-button type="text" @click="showResolve(scope.row)">解答</el-button>
                                        <el-button type="text" class="table-delete-btn"
                                            @click="handleDelete(scope.$index, scope.row)"></el-button><!--删除-->
                                    </template>
                                </el-table-column>
                            </el-table>
                            <XPagination ref="pageInfo" :total="total" :get-data="getList" />
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog width="60%" title="解答" :visible.sync="dialogVisible">
            <el-form label-width="80px" ref="form" :model="form">
                <el-form-item label="问题" prop="problemDetails">
                    <el-input type="textarea" :rows="6" v-model="form.problemDetails" disabled />
                </el-form-item>
                <el-form-item label="回复" prop="problemOverview">
                    <el-input type="textarea" :rows="6" v-model="form.problemOverview" maxlength="500" show-word-limit />
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="handleSave">保存</el-button>
            </template>
        </el-dialog>
        <el-dialog width="60%" title="详情" :visible.sync="dialogDetails">
            <el-form label-width="80px" ref="form" :model="form">
                <el-form-item label="问题:" prop="problemDetails">
                    <div style="height: 200px;">{{ form.problemDetails }}</div>
                </el-form-item>
                <el-form-item label="回复:" prop="problemOverview">
                    <div style="height: 200px;">{{ form.problemOverview }}</div>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="dialogDetails = false">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import XPagination from "../../components/xpagination/XPagination"
import * as expertSolution from "../../api/expertSolution"
import XUpload from "../../components/xupload/XUpload"
import MyEditor from '../../components/vueUeditor.vue'


export default {
    components: { XUpload, XPagination, MyEditor },
    data () {
        return {
            searchForm: {

            },
            tableData: [],
            loading: false,
            dialogVisible: false,
            dialogDetails: false,
            dialogResolve: false,
            total: 0,
            form: {
                positions: []
            },
            userInfo: {}
        }
    },
    methods: {
        getList (pageInfo) {
            const param = {
                userId: this.userInfo.uid,
                ...this.searchForm,
                ...pageInfo
            }
            expertSolution.queryByPage(param).then(response => {
                console.log(response)
                this.tableData = response.data.data.rows
                this.total = response.data.data.total
                this.loading = false
            }).catch(error => {
                console.log(error)
            })
        },
        handleSearch () {
            this.$refs.pageInfo.loadData()
        },
        handleDelete (index, data) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                expertSolution.deleteById({ uid: data.uid }).then(result => {
                    this.loading = false
                    this.$message.success(result.data.msg)
                    this.handleSearch()
                }).catch(error => {
                    this.loading = false
                    console.log(error)
                })
            }).catch(() => {
                console.log('取消删除')
            });
        },
        showDetails (data) {
            this.form = Object.assign({}, data)
            this.dialogDetails = true
        },
        showResolve (data) {
            this.form = Object.assign({}, {
                problemDetails: data.problemDetails,
                uid: data.uid
            })
            this.dialogVisible = true
        },
        handleSave () {
            this.form.status = '已回复'
            expertSolution.update(this.form).then(result => {
                if (result.data.code == 200) {
                    this.$message.success(result.data.msg)
                    this.dialogVisible = false
                    this.handleSearch()
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    mounted () {
        this.userInfo = JSON.parse(localStorage.getItem("user_info"))
        this.handleSearch()
    }
}
</script>

<style scoped lang="scss"></style>
